<template>
  <div class="outmain ba_f heighthv pad_20 bor_rad5">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>瓜分明细</span>
      </div>
    </div>
    <div class="pad_20 flex-bet flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform ss">
        <el-form-item label="关键字搜索">
          <el-input v-model="formInline.keyword" size="medium" placeholder="请输入活动名称/领取人昵称" @input="onSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabledata mar_t20">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
        <el-table-column prop="userId" label="用户ID"  width="80"></el-table-column>
        <el-table-column prop="name" label="昵称/头像">
          <template slot-scope="scope">
            <div class="flex pad_tb_10">
              <div class=""><img class="namelogo" v-bind:src="scope.row.portrait"/></div>
              <div class="flex-col mar_l15">
                <div class="overflowlnr">{{ scope.row.userName }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="divideName" label="活动名称"></el-table-column>
        <el-table-column prop="totalNum" label="总红包数量"></el-table-column>
        <el-table-column prop="surplusNum" label="剩余数量"></el-table-column>
        <el-table-column prop="createdAt" label="领取时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="seeDetail(scope.row)" class="seebtn">查看</el-button>
          </template>
<!--          <template slot-scope="scope">-->
<!--            <div class="flex">-->
<!--              <el-button type="text" @click="handleEdit2(scope.row)">编辑</el-button>-->
<!--              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
<!--            </div>-->
<!--          </template>-->
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <!--            <edit ref="edit" @fetchData="fetchData"></edit>-->
    </div>
  </div>
</template>
<script>
import { joinList } from '@/api/plug';

export default {
  created() {
    this.fetchData();
    if (this.$route.query.id) {
      this.divideId = this.$route.query.id;
      this.fetchData();
    }
  },
  data() {
    return {
      formInline: {
        keyword: '',
      },
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
    };
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await joinList({ page: this.page.currentPage, keyword: this.formInline.keyword, divideId: this.divideId });
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    seeDetail(row) {
      this.$router.push(`/divideinfo?id=${row.id}`);
    },
    handleEdit2(row) {
      if (row.id) {
        this.$router.push(`/couponAdd?id=${row.id}&type=${row.type}`);
      } else {
        this.$router.push({ path: 'couponAdd' });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.ss {
  .el-form-item__content .el-input {
    width: 300px;
  }
}
</style>
